import PropTypes from 'prop-types';
import React from 'react';
import Box from '../box/box.jsx';

import styles from './crash-message.css';
import reloadIcon from './reload.svg';

const CrashMessage = props => (
    <div className={styles.crashWrapper}>
        <Box className={styles.body}>
            <img className={styles.reloadIcon} src={reloadIcon} />
            <h2>呀，出错了。</h2>
            <p>很抱歉，Scratch出故障了。这个问题已经自动报告给Scratch开发团队。请刷新页面再试试。</p>
            {props.eventId && (<p>该错误已记录，编号{props.eventId}</p>)}
            <button className={styles.reloadButton} onClick={props.onReload} >
                重新载入
            </button>
        </Box>
    </div>
);

CrashMessage.propTypes = {
    eventId: PropTypes.string,
    onReload: PropTypes.func.isRequired
};

export default CrashMessage;
